<template>
    <div class="container">
        <ul class="ulOne" >
            <li v-for="(item,index) in one" :key="index" @click="routeMedia(index)"  @mouseover="show(index)"  @mouseout="show()">
                <img :src="item[0]">
                <!-- 遮罩层背景 -->
                <div class="ulTwo" v-if="redIndex!=index" >
                    <p>
                        <img :src="item[1]">
                    </p>
                    <p>
                        <img :src="item[2]">
                    </p>
                    <p>{{item[3]}}</p>
                </div>
                <!-- 红色背景 -->
                <div class="ulThree" v-if="redIndex==index">
                    <img :src="item[4]">
                    <p>{{item[5]}}</p>
                    <p>{{item[6]}}</p>
                    <div>
                        <p>了解更多</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
const img1 = require('../../assets/img/媒体优选/切图/1.png')
const img2 = require('../../assets/img/媒体优选/切图/2.png')
const img3 = require('../../assets/img/媒体优选/切图/3.png')
const img4 = require('../../assets/img/媒体优选/切图/4.png')
const img5 = require('../../assets/img/媒体优选/切图/5.png')
const img6 = require('../../assets/img/媒体优选/切图/6.png')
const img7 = require('../../assets/img/媒体优选/切图/7.png')
const img8 = require('../../assets/img/媒体优选/切图/8.png')
const img9 = require('../../assets/img/媒体优选/切图/9.png')
const img10 = require('../../assets/img/媒体优选/切图/10.png')
const img11 = require('../../assets/img/媒体优选/切图/11.png')
const img12 = require('../../assets/img/媒体优选/切图/12.png')
const img13 = require('../../assets/img/媒体优选/切图/13.png')
export default {
  data() {
    return {
      one: [
        [
          img1,
          img5,
          img13,
          '热销媒体',
          img6,
          '热销媒体',
          '    涵盖短视频、小红书号、网易考拉海购号、微信公众号、微博大V号KOL五大板块，多达8万个意见领袖助您推广。'
        ],
        [
          img2,
          img7,
          img13,
          'APP矩阵',
          img8,
          'APP矩阵',
          '海量APP资源，各行业精准定位，祝您快速找到匹配的投放资源。'
        ],
        [
          img3,
          img9,
          img13,
          'DSP营销',
          img10,
          'DSP营销',
          '对接PC端和移动端的海量媒体，充分利用自身技术实力和大数据平台，为企业提供多屏幕、跨平台、高互动、全覆盖的精准整个营销服务。'
        ],
        [
          img4,
          img11,
          img13,
          'SEM营销',
          img12,
          'SEM营销',
          '整合百度、360、神马、搜狗四大SEM平台，多场景全系列搜索流量供您选择。'
        ]
      ],
      redIndex: 0,
      route: [
        '/view2/hotMedia',
        '/view2/appRect',
        '/view2/DSPSale',
        '/view2/SEMSale'
      ]
    }
  },
  methods: {
    show(index) {
      this.redIndex = index
      // console.log( this.redIndex)
    },
    routeMedia(index) {
      this.$router.push({ path: this.route[index] })
    }
    // myleave(){

    // }
  }
}
</script>
<style scoped>
.ulOne {
  overflow: hidden;
}
.ulOne > li {
  width: 25%;
  float: left;
  height: 450px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.ulTwo {
  width: 300px;
  height: 450px;
  opacity: 0.9;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 30px;
  width: 100%;
  box-sizing: border-box;
}
.ulTwo > p:nth-child(1) > img {
  margin-top: 140px;
}
.ulTwo > p:nth-child(2) > img {
  margin-top: 20px;
}
.ulTwo > p:nth-child(3) {
  margin-top: 43px;
  font-size: 30px;
  color: rgb(34, 34, 34);
}
.ulThree {
  width: 300px;
  height: 450px;
  opacity: 0.9;
  background: #ed4040;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 30px;
  width: 100%;
  box-sizing: border-box;
}
.ulThree > img:nth-child(1) {
  margin-top: 100px;
}
.ulThree > p:nth-child(2) {
  margin-top: 20px;
  font-size: 30px;
  color: #fff;
}
.ulThree > p:nth-child(3) {
  margin-top: 38px;
  font-size: 14px;
  color: #fff;
}
.ulThree > div:nth-child(4) {
  width: 111px;
  height: 37px;
  background: url('../../assets/img/媒体优选/切图/14.png');
  text-align: center;
  line-height: 37px;
  margin: 0 auto;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -56px;
}
</style>


